<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta charset='utf-8'>
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<title>详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/page.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/base.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/common.css" />
		<script src="${pageContext.request.contextPath }/js/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.SuperSlide.2.1.js"></script>
		<script src="${pageContext.request.contextPath }/js/common.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.cookie.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/ajax/ajax.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/ajax/addShoppingCar.js"></script>
	</head>
	<script type="text/javascript">
	$(function(){
		var f = $.cookie('newstrInfo');
		var jsonobj = JSON.parse(f); 
		console.log(jsonobj);
		//note: "远能品之", imgname: "8.jpg", size: "150*56", year: "2018-06-01",
		//price: "565.0", texture: "纸本设色", productnumber: "A008", name: "王大新",
		//proname: "家",salesvolume: "14.0"
	
		$('#proname').html(jsonobj.proname);
		$('#pronote').html(jsonobj.note);
		$('#price').html('￥'+jsonobj.price);
		$('#salesvolumes').html('已售'+jsonobj.salesvolume+'件');
		$('#artistname').html(jsonobj.name);
		$('#size').html(jsonobj.size);
		$('#texture').html(jsonobj.texture);
		$('#year').html(jsonobj.year);
	//	$('#priceround').html();价格范围
		$('#showbox').find('img').attr('src',"${pageContext.request.contextPath }/upload/product_img/"+jsonobj.imgname+"");
		$('#detailimg').attr('src',"${pageContext.request.contextPath }/upload/product_img/"+jsonobj.imgname+"");
	//数量的变化
	//var num = $('#pronumber').val(num);
	var strnum = $('#pronumber').val();
	 num = Number(strnum);
	$('#reducenum').click(function(){
		if(num > 0){
			num --;
		}else{
			num = 0;
		}
		$('#pronumber').val(num);
	});
	$('#addnum').click(function(){
		var strnum = $('#pronumber').val();
		num = Number(strnum);
		var qty = Number(jsonobj.qty);
		//alert(jsonobj.qty+typeof(jsonobj.qty));
		if(num <= qty){
			num ++;
		}else{
			num = qty;
			alert("商家囤货不够。。。");
		}
		$('#pronumber').val(num);
		});
		//接受要加入购物车的商品的信息
		$('#addshoppingcar').click(function(){
			var product =  
			{  
			    'id': jsonobj.productnumber,      
			    'name':jsonobj.proname,  
			    'num':Number($('#pronumber').val(num)),  
			    'price':jsonobj.price,
			    'imgname':jsonobj.imgname
			}; 
			//商品加入到购物车  
			cart.addproduct(product);  
		});
		var jsonstr = {"proname":jsonobj.proname,"price":jsonobj.price,"qty":jsonobj.qty,"num":num,"imgname":jsonobj.imgname};
		$('#goshopping').click(function(){
			console.log(jsonstr);
			var newstr = JSON.stringify(jsonstr);
			$.cookie('newstr',newstr);
			window.location.href="${pageContext.request.contextPath}/jiesuan.jsp";
		});
		
		
	});
	</script>

	<body>
		<jsp:include page="header.jsp"/>
		<!--navbar star-->
		<div class="navbar clearfix">
			<div class="content clearfix">
				<ul>
					<li class="cur"><a href="${pageContext.request.contextPath }/index.jsp">首页</a></li>
					<li><a href="${pageContext.request.contextPath }/special.jsp">专场</a></li>
					<li><a href="${pageContext.request.contextPath }/mall.jsp">商城</a></li>
					<li><a href="${pageContext.request.contextPath }/artist.jsp">艺术家</a></li>
				</ul>
			</div>
		</div>
		<!--navbar end-->
		<!--Main-wrap-->
		<div class="main-wrap graybgtwo pt40 pb40">
			<div class="wrapper">
				<!--Main-pro-info-->
				<div class="main-pro-info white-box  clearfix">
					<div class="fangda clearfix fl">
						<div id="showbox">
						  <img src="" width="1000" height="1000" />
						  <img src="" width="1000" height="1000" />
						  <img src="" width="1000" height="1000" />
						  <img src="" width="1000" height="1000" />
						  <img src="" width="1000" height="1000" />
						  <img src="" width="1000" height="1000" />
						  <img src="" width="1000" height="1000" />
						</div><!--展示图片盒子-->
						<div id="showsum"></div><!--展示图片里边-->
						<p class="showpage">
						  <a href="javascript:void(0);" id="showlast"> < </a>
						  <a href="javascript:void(0);" id="shownext"> > </a>
						</p>
						
						</div>
					<!--产品信息介绍-->
					<div class="fr pro-intro">
						<div class="pb20 line-bot">
							<h3 class="fs26 darkblack lh50 ellipsis" id="proname">墙角数枝梅，凌寒独自开</h3>
							<p class="fs14 lh20 over2" id="pronote">这里是简介这幅画的内容这里是简介这幅画的内容这里是简介这幅画的内容这里是简介这幅画的内容这里是简介这幅画的内容</p>
							<p class="price pt10 clearfix"><strong class="fl red fs40" id="price">¥1000</strong><em id="salesvolumes">已售：2000件</em></p>
						</div>
						<div class="pro-ctent clearfix">
							<ul>
								<li><span>艺 术 家 ：</span><span id="artistname">张文标</span></li>
								<li><span>尺      寸 ：</span><span id="size">50×50cm</span></li>
								<li><span>价      格 ：</span><span id="priceround">2000-3000</span></li>
								<li><span>材      质 ：</span><span id="texture"></span></li>
								<li><span>年      代 ：</span><span id="year">2015年</span></li>
							</ul>
						</div>
						<div class="pt10">
							<div class="p-count fs14 mt20 clearfix">
								<label class="fl lh40 darkblack">数量：</label>
								<p class="fl count ml10 clearfix">
									<a href="javascript:" id="reducenum"  class="fl fs30 reduction">-</a>
									<input type="text" id="pronumber" value=5 class="fl fs16" placeholder="1">
									<a href="javascript:" id="addnum"  class="fl fs30 add">+</a>
								</p>
							</div>
							<div class="but-box mt30">
								<input type="button" class="fl orange-but radius3" id="goshopping" value="立即购买">
								<input type="button" class="fl ml20 orange-but gray-but radius3" id="addshoppingcar" value="加入购物车">
							</div>
						</div>
					</div>
					<!--/end-->
				</div>
				<!--/end-->
				<!--proscroll-->
				<div class="proscroll white-box mt20">
					<a class="prev" href="javascript:void(0)"></a>
					<div class="scrollWrap">
						<ul class="prolist clearfix">
							<li>
								<a href="#" class="db pic"><span><img src="${pageContext.request.contextPath }/upload/2.jpg" alt=""/></span></a>
								<a href="#" class="full-db tit darkblack ellipsis">墙角数枝梅</a>
								<strong class="full-db red"><em class="fs12">¥</em>65.00</strong>
							</li>
							<li>
								<a href="#" class="db pic"><span><img src="${pageContext.request.contextPath }/upload/2.jpg" alt=""/></span></a>
								<a href="#" class="full-db tit darkblack ellipsis">墙角数枝梅</a>
								<strong class="full-db red"><em class="fs12">¥</em>65.00</strong>
							</li>
							<li>
								<a href="#" class="db pic"><span><img src="${pageContext.request.contextPath }/upload/2.jpg" alt=""/></span></a>
								<a href="#" class="full-db tit darkblack ellipsis">墙角数枝梅</a>
								<strong class="full-db red"><em class="fs12">¥</em>65.00</strong>
							</li>
							<li>
								<a href="#" class="db pic"><span><img src="${pageContext.request.contextPath }/upload/2.jpg" alt=""/></span></a>
								<a href="#" class="full-db tit darkblack ellipsis">墙角数枝梅</a>
								<strong class="full-db red"><em class="fs12">¥</em>65.00</strong>
							</li>
							<li>
								<a href="#" class="db pic"><span><img src="${pageContext.request.contextPath }/upload/2.jpg" alt=""/></span></a>
								<a href="#" class="full-db tit darkblack ellipsis">墙角数枝梅</a>
								<strong class="full-db red"><em class="fs12">¥</em>65.00</strong>
							</li>
						</ul>

					</div>
					<a class="next" href="javascript:void(0)"></a>
				</div>
				<!--/end-->

				<div class="mt20 clearfix">
					<div class="fl pro-likes white-box">
						<div class="title"><strong class="fs16 white">大家都喜欢</strong></div>
						<ul class="likelist">
							<li>
								<a href="#" class="db pic"><span><img src="${pageContext.request.contextPath }/upload/2.jpg" alt=""/></span></a>
								<a href="#" class="full-db tit darkblack ellipsis">墙角数枝梅</a>
								<strong class="full-db red"><em class="fs12">¥</em>65.00</strong>
							</li>
							<li>
								<a href="#" class="db pic"><span><img src="${pageContext.request.contextPath }/upload/2.jpg" alt=""/></span></a>
								<a href="#" class="full-db tit darkblack ellipsis">墙角数枝梅</a>
								<strong class="full-db red"><em class="fs12">¥</em>65.00</strong>
							</li>
							<li>
								<a href="#" class="db pic"><span><img src="${pageContext.request.contextPath }/upload/2.jpg" alt=""/></span></a>
								<a href="#" class="full-db tit darkblack ellipsis">墙角数枝梅</a>
								<strong class="full-db red"><em class="fs12">¥</em>65.00</strong>
							</li>

						</ul>
					</div>
					
					<div class="pro-detail fr box-s">
						<div class="tab-hd box-s">
								<ul class="tab-nav clearfix">
								  <li class="fs16 box-s">商品详情</li>
								  <li class="fs16 box-s">商品咨询</li>
								</ul>
						</div>
						<div class="tab-bd">
							<div class="tab-pal">
								<p><img src="" alt="" id="detailimg" /></p>
							</div>
							<div class="tab-pal">
								<div class="pro-zixun clearfix">
									<p class="bt">我要咨询：</p>
									<textarea name="" rows="5" cols="" placeholder="请输入要咨询内容"></textarea>
									<p class="tijiao"><a href="#" class="ra3">提交</a></p>
								</div>
							</div>
						</div>
					</div>

				</div>

			</div>

		</div>
		<!--/end-->
		<jsp:include page="footer.jsp"/>

	</body>
	<script src="${pageContext.request.contextPath }/js/other.js" type="text/javascript" ></script>
</html>